<template>
  <div>
    <!-- 搜索周边 -->
    <div class="searchbox">
      <div class="search">
        <h4>搜索周边</h4>
        <p>发现更多 &gt;</p>
      </div>
    </div>
    <!-- 美食滑动框 -->
    <div class="allbox">
      <div class="all">
        <p class="up">全部</p>
        <p class="upp">美食</p>
        <p class="upp">景点</p>
        <p class="mid">休闲娱乐</p>
        <p class="down">停车场</p>
      </div>
    </div>
    <!-- 美食展示 -->
    <!-- mock数据 -->
    <div class="foods">
      <div class="left">
        <img class="img" src="mayingshuang/imgs/tongshengxiang.jpg" alt="" />
        <h6>同盛祥</h6>
        <div class="mass">
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <span>￥93</span>/人
        </div>
        <p>距离商户360m</p>
      </div>
      <div class="left">
        <img class="img" src="mayingshuang/imgs/lianger.jpg" alt="" />
        <h6>良而</h6>
        <div class="mass">
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <span>￥66</span>/人
        </div>
        <p>距离商户204m</p>
      </div>
      <div class="left">
        <img class="img" src="mayingshuang/imgs/dayanta.jpg" alt="" />
        <h6>大雁塔</h6>
        <div class="mass">
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <span>￥45</span>/人
        </div>
        <p>距离商户100m</p>
      </div>
      <!-- <div class="mid"></div>
      <div class="right"></div> -->
    </div>
    <!-- 查看周边商户 -->
    <div class="watch">
      <div class="search">
        <p>查看周边所有商户</p>
        <p>&gt;</p>
      </div>
    </div>
    <!-- 相关景点推荐 -->
    <div class="recommendbox">
      <div class="recommend">
        <h5>相关景点推荐</h5>
        <!-- 盒子开始 mock数据-->
        <div class="navpic">
          <div class="picbox" v-for="(v, i) in arr" :key="i">
            <img class="starts" :src="v.imgsrc" alt="" />
            <h6>{{ v.tittle }}</h6>
            <div class="mass">
              <img class="start" src="mayingshuang/imgs/star.jpg" alt />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt />
              <span>{{ v.tittle2 }}</span>
            </div>
          </div>
          <!-- 盒子结束 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios.request("http://localhost:8889/Snavlist").then((ok) => {
      console.log(ok);
      this.arr = ok.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.searchbox {
  width: 100%;
  .search {
    margin: auto;
    width: 91.733vw;
    display: flex;
    justify-content: space-between;
    margin-top: 5.067vw;
    p {
      font-size: 2.667vw;
    }
  }
}
.allbox {
  width: 100%;
  .all {
    margin: auto;
    width: 91.733vw;
    display: flex;
    text-align: center;
    line-height: 7.2vw;
    margin-top: 2.4vw;
    font-size: 2.4vw;
    .up {
      width: 13.333vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #ffeee7;
      color: #f68f7e;
      margin-right: 1.333vw;
    }
    .upp {
      width: 13.333vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
      // color: #f68f7e;
      margin-right: 1.333vw;
    }
    .mid {
      width: 25.6vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
      margin-right: 1.333vw;
    }
    .down {
      width: 20.267vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
    }
  }
}
.foods {
  width: 100%;
  margin-top: 2.667vw;
  display: flex;
  .left {
    // width: 91.733vw;
    font-size: 3.2vw;
    margin: auto;
    .img {
      width: 30.133vw;
      height: 20.8vw;
    }

    .mass {
      .start {
        width: 2.667vw;
      }
    }
  }
}
.watch {
  width: 100%;
  .search {
    margin: auto;
    width: 91.733vw;
    display: flex;
    justify-content: space-between;
    margin-top: 5.067vw;
    p {
      font-size: 3.467vw;
    }
  }
}
.recommendbox {
  width: 100%;
  margin-top: 4.267vw;
  .starts {
    width: 44vw;
    height: 40vw;
  }
  .recommend {
    margin: auto;
    width: 91.733vw;
    .navpic {
      margin-top: 2.667vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .mass {
      font-size: 3.2vw;
      .start {
        width: 2.667vw;
      }
    }
  }
}
</style>